<template>
	<view>
		
		<view >
			<image class="image1" src="../../static/images/common/lunpan3.png"></image>
		</view>
		
		<view class="header">
			<view class="building-header2">
				<view class="building-header-left">
					<view class="line"></view>
					合作品牌
				<image class="pic" src="../../static/images/icon/share_icon.png"></image>
				</view>
				<view>
				</view>
			</view>
		</view>
		
		<view class="inputype">
			<view class="text">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;区</view>
			<input class="text2" type="text" placeholder="芙蓉区" placeholder-class="pld"/>
		</view>
		<view class="inputype">
			<view class="text">楼盘名称</view>
			<input class="text2" type="text" placeholder="汤臣一品" placeholder-class="pld"/>
		</view>
		<view class="inputype">
			<view class="text">户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</view>
			<input class="text2" type="text" placeholder="150m²" placeholder-class="pld"/>
		</view>
		
		
		<view class="header">
			<view class="building-header2">
				<view class="building-header-left">
					<view class="line"></view>
					地理位置
				</view>
				<view>
				</view>
			</view>
		</view>
		
		<view class="haha1">
			<image class="haha2" src="../../static/images/common/ditu.png"></image>
			</view>
		
		<view class="content">
		<view class="header">
			<view class="building-header2">
				<view class="building-header-left">
					<view class="line"></view>
					案例展示
				</view>
				<view>
				</view>
			</view>
		</view>
		<view>
		<view class="baner-list">
			 <view class="banner-item">
			 <image class="baneritem-image" src="../../static/images/common/lunpan3.png"></image>
			
			 <view class="font"> <view class="line2"></view>30m²<view class="line3"></view></view>
			 
			 </view>
			 <view class="banner-item">
			 <image class="baneritem-image" src="../../static/images/common/lunpan3.png"></image>
			 <view class="font"> <view class="line2"></view>30m²<view class="line3"></view></view>
			 </view>
		</view>
	
	<view class="baner-list">
		 <view class="banner-item">
		 <image class="baneritem-image" src="../../static/images/common/lunpan3.png"></image>
		 <view class="font"> <view class="line2"></view>30m²<view class="line3"></view></view>
		 </view>
		 <view class="banner-item">
		 <image class="baneritem-image" src="../../static/images/common/lunpan3.png"></image>
		 <view class="font"> <view class="line2"></view>30m²<view class="line3"></view></view>
		 </view>
	</view>
	</view>
		</view>
		
		<view class="div3">
		<view class="div1">
			<view class="div2">确定预约</view>
		</view>
		</view>
		
		<view class="flex">
		<view class="line4"></view>
		
		<view class="tabbaer">
			<image class="bar" src="../../static/images/ico/home_select.png"></image>
			<image class="bar" src="../../static/images/ico/time_unselect.png" @click="yuyue()"></image>
			<image class="bar" src="../../static/images/ico/me_unselect.png" @click="me()"></image>
		</view>
	     
		 <view class="bar5">
		<view class="bar2">首页</view>
		<view class="bar3">预约</view>
		<view class="bar4">我的</view>
		</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			yuyue(){
				uni.switchTab({
					url:"/pages/appointment/index2"
				})
			},
			me(){
				uni.switchTab({
					url:"/pages/we/index"
				})
			}
		}
	}
</script>

<style>
.image1{
	width: 800rpx;
	height: 450rpx;
}
.building-header2 {
		width: 100%;
		display: flex;
		margin-left: 20rpx;
		align-items: center;
		justify-content: space-between;}
	.building-header-left {
		font-size: 40rpx;
		font-weight: 700;
		color: #333333;
		line-height: 28rpx;
		margin-left: 37rpx;
		display: flex;
		align-items: left;
	}
	
	.line {
		width: 6rpx;
		height: 28rpx;
		background: #3d9c36;
		margin-right: 20rpx;
		margin-left: -100rpxz;
	}
	.header {
		margin-top: 50rpx;
	}
	.pic{
		margin-top: -10rpx;
		margin-left: 380rpx;
		width: 60rpx;
		height: 60rpx;
	}
	.inputype{
		display: flex;
		box-sizing: border-box;
		line-height: 30rpx;
	}
	.text{
		position: relative;
	    margin-left: 50rpx;
		font-weight: 500;
		margin-top: 20rpx;
		font-size: 40rpx;
		opacity: 0.8;
	}
	.text2{
		margin-top: 15rpx;
		margin-left: 40rpx;
		font-size: 45rpx;
		border-radius: 6px ;
		border-width: 3rpx;
	    margin-top: 0rpx;
		color: black;
	}
	.pld{
		margin-left: 35rpx;
		color: black;
		size: 60rpx;
		opacity: 0.9;
	}
   .haha1{
	  width: 600;
	  height: 400;
   }
   .haha2{
	   margin-left: 55rpx;
	   margin-top: 30rpx;
	   border-radius: 16rpx 16rpx 16rpx 16rpx;
   }
   .baner-list{
	   margin-top:20rpx;
	   margin-left: 28rpx;
	   overflow-x: scroll;
	   display: flex;
   }
   .banner-item{
	   height: auto;
	   position: relative;
	   margin-left: 20rpx;
	   border-radius: 40rpx}
	.baneritem-image{
		height: 230rpx;
		width: 330rpx;
		position: relative;
		border-radius: 8rpx;
	}
	.font{
		margin-left: 130rpx;
		box-sizing: border-box;
		display: flex;
	}
	.line2 {
		height:  6rpx;
		width: 28rpx;
		background: #3d9c36;
		margin-left: -80rpx;
		margin-right: 40rpx;
		margin-top: 14rpx;
	}
	.line3 {
		position: relative;
		height:  6rpx;
		width: 28rpx;
		background: #3d9c36;
		margin-top: 14rpx;
		margin-left: 50rpx;
	}
	.div1{
		width: 230rpx;
		height: 100rpx;
		background-color: #057748;
		border-radius: 10px ;
		margin-left: 260rpx;
		margin-top: 60rpx;
		position: absolute;
	}
	.div2{
		position: relative;
		margin-left: 54rpx;
		margin-top: 26rpx;
		color: #fff;
		font-weight: 100;
		}
		.div3{
			width: 500rpx;
			height: 500rpx;
		}
		.tabbaer{
			 display: flex;
			 box-sizing: border-box;
		}
		.bar{
			width: 50rpx;
			height: 50rpx;
			margin: 100rpx;
			margin-bottom:20rpx;
		}
		.bar5{
			display: flex;
			box-sizing: border-box;
		}
	.bar2{
		width: 20vh;
		color: rgb(0, 0, 0,0.8);
		font-size: 10rpx;
	    margin-left: 100rpx;
		margin-top: -10rpx;
	}
	.bar3{
		width: 20vh;
		color: rgb(0, 0, 0,0.8);
		font-size: 10rpx;
	    margin-left: -14rpx;
		margin-top: -10rpx;
	}
	.bar4{
		width: 20vh;
		color: rgb(0, 0, 0,0.8);
		font-size: 10rpx;
	    margin-left: -14rpx;
		margin-top: -10rpx;
	}
	.line4 {
		position: relative;
		height:  2rpx;
		width: 900rpx;
		background: rgb(0, 0, 0,0.1);
		margin-bottom: -80rpx;
	}
	.flex{
		position: fixed;
		bottom: 0;
		background-color: white;
	}
</style>
